import React from 'react';

import { Modal, message } from 'antd';
import Draggable from 'react-draggable';
import { connect } from 'react-redux';
import { changeshowModalActiom, changePhoneVisible, changeRegister } from './store/actionCreators';
import './index.css'
import { LoginWrapper } from './style';
import bannerimg from '../../assets/img/platform.png'
import Phone from './phone-login';
class Login extends React.Component {
  state = {
    disabled: false,
    bounds: { left: 0, top: 0, bottom: 0, right: 0 },
    switch: false
  };

  draggleRef = React.createRef(); // 用于拖拽时拿到的元素
  inputRef = React.createRef();
  handleCancel = e => {
    console.log(e);
    this.props.changeVisible(false)
  };

  onStart = (event, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = this.draggleRef?.current?.getBoundingClientRect();
    this.setState({
      bounds: {
        left: -targetRect?.left + uiData?.x,
        right: clientWidth - (targetRect?.right - uiData?.x),
        top: -targetRect?.top + uiData?.y,
        bottom: clientHeight - (targetRect?.bottom - uiData?.y),
      },
    });
  };

  phoneLogin = (e) => {
    if (this.inputRef.current.checked) {
      this.props.changeVisible(false)
      this.props.phoneLogin(true)
    } else {
      message.info('请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》');
    }
  }
  showRegister = () => {
    if (this.inputRef.current.checked) {
      this.props.isShowRegister(true)
      this.props.changeVisible(false)
    } else {
      message.info('请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》');
    }
  }
  render() {
    const { bounds, disabled } = this.state;
    return (
      <>
        <div className="demo">
          <Modal
            title={
              <div
                style={{
                  width: '100%',
                  cursor: 'move',
                }}
                onMouseOver={() => {
                  if (disabled) {
                    this.setState({
                      disabled: false,
                    });
                  }
                }}
                onMouseOut={() => {
                  this.setState({
                    disabled: true,
                  });
                }}
                onFocus={() => { }}
                onBlur={() => { }}
              // end
              >
                登录
            </div>
            }
            footer=""
            visible={this.props.visible}
            width={600}
            onCancel={this.handleCancel}
            modalRender={modal => (
              <Draggable
                disabled={disabled} // 是否禁用拖拽
                bounds={bounds} // 拖拽的配置跟随鼠标
                onStart={(event, uiData) => this.onStart(event, uiData)} //拖拽开始时调用
              >
                <div ref={this.draggleRef}>{modal}</div>
              </Draggable>
            )}
          >
            <LoginWrapper>
              <div className="left">
                <img src={bannerimg} alt=" " />
                <div className="login-btn sprite_button" onClick={e => this.phoneLogin(e)}>
                  手机号登录
               </div>
                <div className="register-btn sprite_button" onClick={this.showRegister}><i className="sprite_button">注册</i></div>
                <div className="agreement">
                  <input type="checkbox" ref={this.inputRef} className="consent" />
                  <label>同意</label>
                  <a href="http://st.music.163.com/official-terms/service" target="_blank" rel="noreferrer" >《服务条款》</a>
                  <a href="http://st.music.163.com/official-terms/privacy" target="_blank" rel="noreferrer">《隐私政策》</a>
                  <a href="https://st.music.163.com/official-terms/children" target="_blank" rel="noreferrer">《儿童隐私政策》</a>
                </div>
              </div>
              <div className="right">
                <div className="qq">
                  <i className="sprite_login_icon"></i>
                  <p>qq登录</p>
                </div>
                <div className="weixin">
                  <i className="sprite_login_icon"></i>
                  <p>微信登录</p>
                </div>
                <div className="weibo">
                  <i className="sprite_login_icon"></i>
                  <p>微博登录</p>
                </div>
                <div className="email">
                  <i className="sprite_login_icon"></i>
                  <p>网易账号登录</p>
                </div>
                <div className="two-code"></div>
              </div>
            </LoginWrapper>
          </Modal>
        </div>
        <Phone switch={this.state.switch}></Phone>
      </>
    );
  }
}
export default connect(
  state => ({ visible: state.getIn(["login", "visible"]) }),//映射状态
  {
    changeVisible: changeshowModalActiom,//映射操作状态的方法
    phoneLogin: changePhoneVisible,
    isShowRegister: changeRegister
  }
)(Login)